<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 让 IE 浏览器运行最新的渲染模式下 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 让部分国产浏览器默认采用高速模式渲染页面 -->
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="css/Normalize.css">
  <link href="css/video-js.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>森茉文化传媒</title>
</head>
<style>
  @media (min-width:750px) {
    html {
      min-width: 1200px;
    }
    .index-sec-desc {
      position: relative;
      height: 20rem;
      background-image: url(http://120.79.15.76/file/5c55bbe8f7126d896f25d6119481a278.jpg);
    }

    .index-sec-desc>div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      width: 16rem;
      height: 4.1rem;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

    .index-sec-slider {
      position: relative;
    }

    .index-sec-slider .slider-prev {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 14px;
      height: 24px;
      left: 15.8rem;
      cursor: pointer;
    }

    .index-sec-slider .slider-next {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 14px;
      height: 24px;
      right: 15.8rem;
      cursor: pointer;
    }

    .index-sec-desc>div>p {
      font-size: 1.6rem;
    }

    .index-sec-desc>div>div {
      width: 100%;
      height: 1.3rem;
      line-height: 1.3rem;
      text-align: center;
      font-size: 0.9rem;
      background: linear-gradient(to right, rgba(16, 168, 173, 1) 50%, rgba(60, 161, 255, 1) 50%);
    }

    .index-sec-slider>div {
      padding: 2rem 18rem 0 18rem;
    }

    .banner-img {
      width: 60rem;
      height: 16rem;
    }

    .index-sec-recommand,
    .index-sec-picture,
    .index-sec-video {
      position: relative;
    }

    .index-sec-recommand>div,
    .index-sec-picture>div,
    .index-sec-video>div {
      margin: 4rem 18rem 0 18rem;
      height: 15.9rem;
    }

    .index-sec-picture .i-picture-desc,
    .index-sec-video .i-video-desc {
      height: 3.4rem;
      padding: 0.8rem 0 0.8rem 0.8rem;
      background: rgba(245, 245, 245, 1);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
    }

    .index-sec-picture .swiper-slide img,
    .index-sec-video .swiper-slide img {
      width: 100%;
      height: 10.5rem;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background: rgba(225, 225, 225, 1);
    }

    .index-sec-picture .picture-prev,
    .index-sec-video .video-prev {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 0.7rem;
      height: 1.2rem;
      left: 15.8rem;
      cursor: pointer;
    }

    .index-sec-picture .picture-next,
    .index-sec-video .video-next {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto 0;
      width: 0.7rem;
      height: 1.2rem;
      right: 15.8rem;
      cursor: pointer;
    }

    .index-sec-recommand .swiper-slide img {
      width: 9.1rem;
      height: 6.8rem;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .recommand-list {
      display: flex;
      justify-content: center;
    }

    .recommand-list-item {
      margin-left: 1rem;
      cursor: pointer;
    }

    .recommand-list-item:nth-child(1) {
      margin-left: 0;
    }

    .recommand-list img {
      width: 9.1rem;
      height: 6.8rem;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background: rgba(225, 225, 225, 1);
    }

    .recommand-list .recommand-list-item>a>div {
      text-align: center;
      background: rgba(245, 245, 245, 1);
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      height: 2.4rem;
      line-height: 2.4rem;
    }

    .i-video-title,
    .i-picture-title {
      margin-bottom: 0.5rem;
    }

    .navbar-search input {
      width: 0;
      border: 0;
      padding: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 1rem;
    }

    .navbar-search {
      position: relative;
      height: 100%;
    }

    .navbar-search form {
      width: 11rem;
      min-width: 180px;
      position: relative;
      margin: 0 auto;
      height: 100%;
    }

    .footer {
      margin-top: 3rem;
      padding: 3rem 0;
    }

    .navbar-title,
    .index-sec-phone {
      display: none;
    }
  }

  @media(max-width:750px) {
    html {
      background-color: rgba(238, 238, 238, 1);
    }
    .slider-next,
    .slider-prev,
    .index-sec-recommand,
    .index-sec-video,
    .index-sec-picture,
    .index-sec-desc,
    .footer {
      display: none;
    }
    .navbar-title {
      line-height: 2.4rem;
      font-weight: bold;
      font-size: 1.8rem;
      font-family: SourceHanSansSC-Bold, Arial, "Microsoft Yahei";
      color: rgba(255, 255, 255, 1);
    }

    .phone-list-item {
      margin-top: 1rem;
      height: 23.5rem;
    }

    .index-sec-slider {
      margin-bottom: 1rem;
    }

    .phone-list-item>a>img {
      width: 100%;
      height: 20rem;
    }
    .phone-list-item>a>div {
      padding: 1rem;
      font-size: 1.6rem;
      font-weight: bold;
      font-family: SourceHanSansSC-Bold, Arial, "Microsoft Yahei";
      color: rgba(26, 26, 26, 1);
      background: rgba(255, 255, 255, 1);
    }
  }
</style>

<body>
  <header class="header"></header>
  <section class="index-sec-desc">
    <div>
      <p class="color255">森茉文化</p>
      <div>
        <p class="color255">带给你不一样的视觉体验</p>
      </div>
    </div>
  </section>
  <section class="index-sec-slider">
    <div>
      <div class="swiper-container slider-container center">
        <div class="swiper-wrapper slider-wrapper">
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-pagination"></div>
      </div>
      <img class="slider-prev" src="./images/ic_left.png" alt="">
      <img class="slider-next" src="./images/ic_right.png" alt="">
    </div>
  </section>

  <section class="index-sec-video">
    <div>
      <div class="font-size-20 color26 bold font-SansSc margin-bottom-20">
        精彩视频
      </div>
      <div class="swiper-container video-container">
        <div class="swiper-wrapper video-wrapper">
        </div>
      </div>
    </div>
    <img class="video-prev" src="./images/ic_left.png" alt="">
    <img class="video-next" src="./images/ic_right.png" alt="">
  </section>

  <section class="index-sec-picture">
    <div>
      <div class="font-size-20 color26 bold font-SansSc margin-bottom-20">
        <p>精彩照片</p>
      </div>
      <div class="swiper-container picture-container">
        <div class="swiper-wrapper picture-wrapper">
        </div>
      </div>
      <img class="picture-prev" src="./images/ic_left.png" alt="">
      <img class="picture-next" src="./images/ic_right.png" alt="">
    </div>
  </section>
  <section class="index-sec-recommand">
    <div>
      <div class="font-size-20 color26 bold font-SansSc margin-bottom-20">
        <p>为你推荐</p>
      </div>
      <div class="recommand-list">
      </div>
    </div>
  </section>

  <div class="footer">
  </div>

  <section class="index-sec-phone">
    <!-- <div class="phone-list-item">
      <img src="http://120.79.15.76/file/d50c31e14a1ee0eb10e170b85cddfe0e.png" alt="">
      <div>森林 - Forest</div>
    </div> -->
  </section>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
  <script src="./js/BaseJs.js"></script>
  <script>
    console.log(navigator.userAgent);
    if (/mobile/i.test(navigator.userAgent)) {
      BaseJs.getData(BaseJs.api + 'media?good=1', function (item) {
        var ndPhone = "";
        var type0 = 0,
          type1 = 0,
          type2 = 0,
          type3 = 0;
        for (var i = 0; i < item.length; i++) {
          switch (item[i].type) {
            case 0:
              type0++;
              if (type0 <= 6) {
                ndPhone +=
                  '<div class="phone-list-item"><a href=./picture-detail.html?id=' + item[i].id + '>' +
                  '<img src=' + item[i].cover + ' alt="">' +
                  '<div>' + item[i].title + '</div></a></div>'
              }
              break;
            case 1:
              type1++;
              if (type0 <= 6) {
                ndPhone +=
                  '<div class="phone-list-item"><a href=./video-detail.html?id=' + item[i].id + '>' +
                  '<img src=' + item[i].cover + ' alt="">' +
                  '<div>' + item[i].title + '</div></a></div>'
              }
              break;
            case 2:
              type2++;
              if (type0 <= 6) {
                ndPhone +=
                  '<div class="phone-list-item"><a href=./vr-picture-detail.html?id=' + item[i].id + '>' +
                  '<img src=' + item[i].cover + ' alt="">' +
                  '<div>' + item[i].title + '</div></a></div>'
              }
              break;
            case 3:
              type3++;
              if (type0 <= 6) {
                ndPhone +=
                  '<div class="phone-list-item"><a href=./vr-video-detail.html?id=' + item[i].id + '>' +
                  '<img src=' + item[i].cover + ' alt="">' +
                  '<div>' + item[i].title + '</div></a></div>'
              }
              break;
          }
        }
        $('.index-sec-phone').append(ndPhone);
      })

    } else {
      console.log('pc');
      $('.about-us').click(function (e) {
        e.preventDefault();
        window.scrollTo(0, document.body.scrollHeight)
      })
      // 获取精彩视频
      BaseJs.getData(BaseJs.api + 'media?type=1&good=1', function (item) {
        var ndVideo = "";
        if (item.length > 0) {
          for (var i = 0; i < item.length; i++) {
            var title = item[i].title;
            var description = item[i].description;
            var url = item[i].url;
            var cover = item[i].cover;
            var time = item[i].createAt.split(' ')[0];
            console.log(time);
            ndVideo +=
              '<div class="swiper-slide"><div><a href="./video-detail.html?id=' + item[i].id + '"><img src=' +
              cover + ' alt="">' +
              '<div class="i-video-desc"><p class="i-video-title color26 font-size-16 bold font-SansSc">' + title +
              '</p><p class="i-video-time font-size-12 font-Regular">' + time + '</p>' +
              '</div></a></div></div>'
          }
          $('.video-wrapper').append(ndVideo);
        }
        // 精选视频
        var videoSwiper = new Swiper('.video-container', {
          spaceBetween: 20,
          slidesOffsetBefore: -10,
          slidesPerView: 4,
          loopFillGroupWithBlank: true,
          navigation: {
            nextEl: '.video-next',
            prevEl: '.video-prev',
          },
          breakpoints: {
            //当宽度小于等于750px
            750: {
              slidesPerView: 1,
            }
          }
        });
      })

      // 获取精彩照片
      BaseJs.getData(BaseJs.api + 'media?type=0&good=1', function (item) {
        console.log(item);
        var ndPicture = "";
        if (item.length > 0) {
          for (var i = 0; i < item.length; i++) {
            var time = item[i].createAt.split(' ')[0];
            console.log(time);
            ndPicture += '<div class="swiper-slide"><div><a href="./picture-detail.html?id=' + item[i].id + '">' +
              '<img src=' + item[i].cover + ' alt="">' +
              '<div class="i-picture-desc"><p class="i-video-title color26 font-size-16 bold font-SansSc">' + item[
                i]
              .title +
              '</p><p class="i-video-time font-size-12 font-Regular">' + time + '</p></div></a></div></div>';
          }
          $('.picture-wrapper').append(ndPicture);
        }
        var pictureSmallSwiper = new Swiper('.picture-container', {
          spaceBetween: 20,
          loopFillGroupWithBlank: true,
          slidesPerView: 4,
          slidesOffsetBefore: -10,
          navigation: {
            nextEl: '.picture-next',
            prevEl: '.picture-prev',
          },
        });
      })
      // 推荐内容
      BaseJs.getData(BaseJs.api + 'media/random?type=0', function (item) {
        var ndRecommend = "";
        for (var i = 0; i < item.length && i < 6; i++) {
          ndRecommend +=
            '<div class="recommand-list-item"><a href="./picture-detail.html?id=' + item[i].id + '">' +
            '<img src=' + item[i].cover + ' alt=""><div class="color26 font-size-16 bold font-SansSc"><p>' + item[i]
            .title +
            '</p></div></a></div>'
        }
        $('.recommand-list').append(ndRecommend);
      })
    }
    $('.header').append(BaseJs.htmlHeader);
    $('.footer').append(BaseJs.htmlFooter);
    $('.navbar-title').text('首页');
    BaseJs.isIE();
    BaseJs.calRem();
    BaseJs.navActive(0);
    BaseJs.getNavMenu();
    BaseJs.getCompanyInfo();
    BaseJs.searchBtnHover();
    $('#search-btn').click(function (e) {
      BaseJs.searchEvent(e);
    })

    // 获取轮播图
    BaseJs.getData(BaseJs.api + 'banner', function (item) {
      var ndBanner = "";
      console.log(item);
      for (var i = 0; i < item.length; i++) {
        var type = item[i].type;
        var urlDetail = "";
        switch (type) {
          case 0:
            urlDetail = "./picture-detail.html?id=" + item[i].id;
            break;
          case 1:
            urlDetail = "./video-detail.html?id=" + item[i].id;
            break;
          case 2:
            urlDetail = item[i].url;
            break;
          case 3:
            urlDetail = "./vr-video-detail.html?id=" + item[i].id;
            break;
        }
        ndBanner += '<div class="swiper-slide"><a href="' + urlDetail + '"><img class="width100 banner-img" src=' +
          item[i].cover +
          '></a></div>'
      }

      $('.slider-wrapper').append(ndBanner);
      var bannerSwiper = new Swiper('.slider-container', {
        spaceBetween: 30,
        centeredSlides: true,
        loopFillGroupWithBlank: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        navigation: {
          nextEl: '.slider-next',
          prevEl: '.slider-prev',
        },
        pagination: {
          el: '.swiper-pagination',
        },
      });
    })
    leftIcon('.slider-prev');
    leftIcon('.video-prev');
    leftIcon('.picture-prev');

    function leftIcon(id) {
      $(id).hover(function (e) {
        $(this).attr('src', './images/ic_left_pre.png')
        $(this).css('width', '2.35rem');
        $(this).css('height', '2.35rem');
        $(this).css('left', '15rem');
      }, function (e) {
        $(this).attr('src', './images/ic_left.png')
        $(this).css('width', '0.7rem');
        $(this).css('height', '1.2rem');
        $(this).css('left', '15.8rem');
      })
    }

    rightIcon('.slider-next');
    rightIcon('.video-next');
    rightIcon('.picture-next');

    function rightIcon(id) {
      $(id).hover(function (e) {
        $(this).attr('src', './images/ic_right_pre.png')
        $(this).css('width', '2.35rem');
        $(this).css('height', '2.35rem');
        $(this).css('right', '15rem');
      }, function (e) {
        $(this).attr('src', './images/ic_right.png')
        $(this).css('width', '0.7rem');
        $(this).css('height', '1.2rem');
        $(this).css('right', '15.8rem');
      })
    }
  </script>
</body>

</html>